<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/commons.jsp" %>
<html>
	<head>
		<title>修改头像</title>
		<link rel="stylesheet" type="text/css" href="${ctx }/css/style.css" />
		<link rel="stylesheet" type="text/css" href="${ctx }/css/uploadify.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="${ctx }/css/jquery.Jcrop.css" media="screen" />
		<script type="text/javascript" src="${ctx }/js/jquery.js"></script>
		<script type="text/javascript" src="${ctx }/js/weibo.js"></script>
		<script type="text/javascript" src="${ctx }/js/swfobject.js"></script>
		<script type="text/javascript" src="${ctx }/js/jquery.uploadify.v2.1.4.js"></script>
		<script type="text/javascript" src="${ctx }/js/jquery.Jcrop.js"></script>
		<script language="Javascript">
			function gohome(){
				window.location="../home";
			}
			$(function(){
				$("#avatar_submit").click(function(e) {  
				    e.preventDefault();  
				    var form = $("#avatar_form");  
				    $.ajax({  
				        type: "post",  
				        url: form.attr("action"),  
				        dataType: "json",  
				        data: form.serialize(),
				        success: function(data) {  
				            if (data.status == "ok") {  
					           alert("保存成功");
					           gohome();
				            } else {  
				                alert("error...");  
				            }  
				        }  
				    });  
				}); 
			});
		</script>
	</head>
	<body>
		<span id="ctx" title="${ctx }"></span>
		<c:if test="${sessionScope.user eq null}">
			<c:redirect url="/index.jsp" />
		</c:if>
		<div id="wrap">
			<div id="global_header">
				<div class="content">
					<a href="${ctx }/${sessionScope.user.id }">首页</a>
					<a href="${ctx }/${sessionScope.user.id }/profile">我的微博</a>
					<a href="${ctx }/settings/avatar">设置头像</a>
					<a href="${ctx }/logout">退出</a>
					<form action="${ctx }/search" method="post">
							<input type="text" name="usernick" />
							<input type="submit" value="搜索" />
					</form>
				</div>
			</div>
			<div id="container">
				<div id="main">
					<div id="content">
						<div id="left">
							<div class="avatar">
								<img id="avatar_image" src="${ctx }/avatar/${sessionScope.user.avatar }" width="50" />${sessionScope.user.nick }
							</div>
						</div>
						<div id="center">
							<p>修改头像</p>
							<hr />
							<div id="avatar_wrap">
								<div id="avatar_file">
									<input type="file" name="uploadify" id="avatar" />
								</div>
								<div class="avatar_crop">
									<img id="target" src="" alt="" title=""/>
								</div>
								<div class="avatar_preview">
									<img id="preview" src="${ctx }/avatar/${requestScope.avatar }" alt="" />
								</div>
								<div class="clear"></div>
								<div id="fileQueue"></div>
								<div>
									<a id="avatar_submit" href="javascript:;">保存</a>
									<a id="avatar_cancle" href="javascript:;">取消</a>
								</div>
							</div>
							<form id="avatar_form" action="${ctx }/crop" method="post">  
					            <input type="hidden" id="x" name="x" />  
					            <input type="hidden" id="y" name="y" />  
					            <input type="hidden" id="w" name="w" />  
					            <input type="hidden" id="h" name="h" />  
					            <input type="hidden" id="f" name="f" />  
					        </form> 
						</div>
						<div id="right">
							right...
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>
			<div id="global_footer">
				footer... 
			</div>
		</div>
	</body>
</html>
